<template>
  <border-box>
    <div slot="content" class="user-area">
      <!-- 头像 -->
      <img v-if="avatar" class="avatar" :src="avatar" />

      <!-- 用户数据 -->
      <div class="user-data">
        <span class="message">{{ realname }}，{{ time }}</span>
        <span class="week-day">{{ week }}</span>
        <div class="button-area">
          <div class="button blue" @click="chrefLog">工作汇报</div>
          <div class="button red" @click="logout">注销</div>
        </div>
      </div>

      <!-- 工作汇报弹窗 -->
      <work-report ref="JWorkReport" />
    </div>
  </border-box>
</template>

<script>
import { ajaxPost } from 'global/axios';
import storage from 'good-storage';
import { domain2 } from 'global/setting';
import BorderBox from '../../common/BorderBox';
import WorkReport from './WorkReport';

export default {
  components: {
    'border-box': BorderBox,
    'work-report': WorkReport,
  },

  data () {
    return {
      urlLogout: '/sys/userinfo/logout',
      avatar: '',
      realname: '',
      time: '',
      week: '',
      weekList: ['日', '一', '二', '三', '四', '五', '六'],
    };
  },

  mounted () {
    let now = new Date();
    let hour = now.getHours();
    let week = now.getDay();

    if (hour < 6) {
      this.time = '凌晨好！';
    } else if (hour < 9) {
      this.time = '早上好！';
    } else if (hour < 12) {
      this.time = '上午好！';
    } else if (hour < 14) {
      this.time = '中午好！';
    } else if (hour < 17) {
      this.time = '下午好！';
    } else if (hour < 19) {
      this.time = '傍晚好！';
    } else if (hour < 22) {
      this.time = '晚上好！';
    } else {
      this.time = '夜里好！';
    }

    this.week = `今天是星期${this.weekList[week]}`;
    this.avatar = `${domain2}${storage.session.get('head')}`;
    this.realname = storage.session.get('realname');
  },

  methods: {
    // 打开工作汇报弹窗
    chrefLog () {
      this.$refs.JWorkReport.show();
    },
    logoutFuc () { // 退出登录调用此接口
      let params = {
        data: {},
        url: this.urlLogout,
        token: storage.session.get('token'),
        success: res => { },
      };
      ajaxPost(params);
    },
    // 退出登陆
    logout () {
      if (storage.session.get('isOtherLoginType') === true) {
        let { origin } = window.location
        let backurl = `${origin}/hzSystem/logout`
        window.location.href = `
        https://xtbg.gdzwfw.gov.cn/zwrz/rz/sso/logout?client_id=zwrz_fshzzgl&backurl=${encodeURIComponent(backurl)}
        `
      }
      storage.remove('token');
      storage.remove('realname');
      storage.remove('roles');
      storage.remove('userid');
      storage.remove('username');
      storage.remove('position');
      storage.remove('head');
      storage.remove('level');
      storage.remove('dep_name');
      this.logoutFuc();
      this.$router.push('/login');
    },
  },
};
</script>

<style lang="less" scoped>
.user-area {
  width: 307px;
  box-sizing: border-box;
  padding: 20px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .avatar {
    width: 90px;
    height: 90px;
    padding: 4px;
    box-sizing: border-box;
    display: block;
    border-radius: 50%;
    border: 1px dashed #009aff;
  }
  .user-data {
    width: 180px;
    span {
      display: block;
    }
    .message {
      height: 16px;
      line-height: 16px;
      margin-bottom: 18px;
      font-size: 16px;
      color: #ffffff;
    }
    .week-day {
      height: 14px;
      line-height: 14px;
      margin-bottom: 13px;
      font-size: 14px;
      color: #3ac0ff;
    }
    .button-area {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .button {
        width: 84px;
        height: 28px;
        line-height: 28px;
        font-size: 14px;
        text-align: center;
        color: #ffffff;
        border-radius: 5px;
        cursor: pointer;
        &:hover {
          color: #fdd158;
        }
      }
      .blue {
        background-image: linear-gradient(
          to right,
          rgb(0, 114, 255),
          rgb(55, 185, 255)
        );
      }
      .red {
        background-image: linear-gradient(
          to right,
          rgb(241, 5, 116),
          rgb(245, 114, 110)
        );
      }
    }
  }
}
</style>